<template>
  <div class="refund-or-change PublicListStyle">
    <template v-if='beforeGetFocus'>
      <div class='searchDiv marginBottom-20'>
        <i class='el-icon-search searchBtn'></i>
        <el-input placeholder="姓名/电话/车站" class='searchInput' @focus='onFousEvent'></el-input>
      </div>
    </template>
    <template v-else>
      <div class='onfousInput marginBottom-20'>
        <div class='onfocusInputContent'>
          <i class='el-icon-search searchBtn1'></i>
          <el-input placeholder="姓名/电话/车站" class='searchInput1' v-model='searchInfo.search' @keyup.native.enter='loadList(1)' ref='searchInput1'></el-input>
          <i class='el-icon-close closeSearch' @click='closeSearch'></i>
          <el-button type='primary' class='btn-cancel resetCustomer' @click='resetCondition'>条件重置</el-button>
          <el-button type='primary' class='btn-primary searchCustomer' @click='loadList(1)'>搜索</el-button>
          <div class='lineStyle'></div>
          <div class='conditionBtn'>
            更多条件筛选
         </div>
          <div class='searchByCondition' >
            <el-form :inline="true" class="demo-form-inline" ref='searchForm' :model='searchInfo'>
              <el-form-item label="乘车车站" prop='startSiteId'>
                <el-select v-model='searchInfo.startSiteId' @change='loadList(1)'>
                  <el-option label="全部" value=""></el-option>
                  <el-option v-for="(item,index) in siteList" :key="index"
                             :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="到达车站" prop='endSiteId'>
                <el-select v-model='searchInfo.endSiteId' @change='loadList(1)'>
                  <el-option label="全部" value=""></el-option>
                  <el-option v-for="(item,index) in siteList" :key="index"
                             :label="item.name" :value="item.id"></el-option>
                </el-select>
              </el-form-item>
              <div style="display: inline-block;">
                <el-form-item label="发车时间从" style='margin-right:15px;'>
                  <el-date-picker v-model="searchInfo.startDate" type="datetime"
                                  placeholder="开始时间" :editable="false" format="yyyy-MM-dd HH:mm"
                                  @change="changeDate('startDate')"></el-date-picker>
                </el-form-item>
                <el-form-item label="到">
                  <el-date-picker v-model="searchInfo.endDate" type="datetime"
                                  placeholder="结束时间" :editable="false" format="yyyy-MM-dd HH:mm"
                                  @change="changeDate('endDate')"></el-date-picker>
                </el-form-item>
              </div>
            </el-form>
          </div>
        </div>
      </div>
    </template>

    <div class="gray_bg tabContainer" v-loading="isLoading" element-loading-text="拼命加载中">
      <el-table :data="tableData.elements">
        <el-table-column label="购票人姓名" prop="buyer"
                         width="120px" show-overflow-tooltip></el-table-column>
        <el-table-column label="电话" prop="phone"
                         width="130px"></el-table-column>
        <el-table-column label="发车时间" prop="rideTime"
                         width="155px">
          <template slot-scope="scope">
            {{ scope.row.rideTime | formatMinutes }}
           </template>
        </el-table-column>
        <el-table-column label="乘车车站" prop="startSite"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="到达车站" prop="endSite"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="操作说明" prop="des"
                         width="210px" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作员" prop="operationName"
                         show-overflow-tooltip></el-table-column>
        <el-table-column label="操作时间" prop="mgtTime"
                         width="155px">
          <template slot-scope="scope">
            {{ scope.row.mgtTime | formatMinutes }}
            </template>
        </el-table-column>
      </el-table>

      <el-pagination v-if="parseInt(tableData.totalAmount)>0"
                     :current-page="tableData.page" :page-size="tableData.size"
                     :total="parseInt(tableData.totalAmount)" layout="total, prev, pager, next"
                     @current-change="loadList"></el-pagination>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import ticketService from '../../../services/ticket'

  export default {
    name: 'MkHandleRecords',

    props: ['activeName'],

    computed: mapState({
      siteList: state => state.route.siteList
    }),

    watch: {
      activeName: function (value) {
        if (value === 'second') {
          this.closeSearch();
        }
      }
    },

    methods: {
      loadList (pageValue) {
        this.isLoading = true;
        if (pageValue) {
          this.searchInfo['page.pn'] = pageValue;
        }
        ticketService.loadHandleListServer (this.searchInfo, data => {
          this.tableData = data.data;
          this.isLoading = false;
        });
      },

      changeDate (type) {
        if (this.searchInfo[type]) {
          this.searchInfo[type] = new Date(this.searchInfo[type]).pattern('yyyy-MM-dd HH:mm');
        } else {
          this.searchInfo[type] = '';
        }
        if ((this.searchInfo.startDate && this.searchInfo.endDate) || (!this.searchInfo.startDate && !this.searchInfo.endDate)) {
          this.loadList(1);
        }
      },

      onFousEvent() {
        this.beforeGetFocus=false;
        this.$nextTick(() => {
          this.$refs.searchInput1.$el.children[0].focus();
        });
      },

      closeSearch() {
        this.resetCondition();
        this.beforeGetFocus = true;
      },

      resetCondition() {
        for (let item in this.searchInfo) {
          if (item === 'page.size') {
            this.searchInfo[item] = 10;
          } else if (item === 'page.pn') {
            this.searchInfo[item] = 1;
          } else {
            this.searchInfo[item] = '';
          }
        }
        this.loadList(1);
      },
    },

    mounted: function() {
      this.$store.dispatch('loadSiteList', {fields: 'id,name'});
      this.loadList(1);
    },

    data () {
      return {
        beforeGetFocus: true,
        isLoading: false,
        formDialogVisible: true,
        searchInfo: {
          'page.pn': 1,
          'page.size': 10,
          endDate: '',
          endSiteId: '',
          search:'',
          startDate:'',
          startSiteId:''
        },
        tableData: {}
      }
    },

    filters: {
      formatMinutes (value) {
        if (value) {
          return new Date(value).pattern('yyyy-MM-dd HH:mm');
        } else {
          return '';
        }
      }
    }
  }
</script>

<style lang='less'>
</style>
